<template>
  <div class="row">
<!--  用户列表  -->
    <User v-show="info.users.length > 0" v-for="user in info.users"
          :key="user.id" 
          :user="user"></User>
<!--  欢迎词  -->
    <h1 v-show="info.isFirst">欢迎使用！</h1>
<!--  加载中  -->
    <h1 v-show="info.isLoading">加载中...</h1>
<!--  错误信息  -->
    <h1 v-show="info.errMsg !== ''" style="color:red">{{info.errMsg}}</h1>
  </div>
</template>

<script>
import User from "./User";

export default {
  name: "List",
  data() {
    return {
      info:{
        users: [],
        isFirst: true,
        isLoading: false,
        errMsg: ''
      }
    }
  },
  mounted() {
    this.$bus.$on('bus_updateList', (data) => {
      this.info = {...this.info, ...data};
    });
  },
  beforeDestroy() {
    this.$bus.$off('_getUsers');
  },
  components: {User},
}
</script>

<style scoped>

</style>